<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>listing directory {directory}</title>
    <style>
    {style}
    input#upload-input { display:none; }
    div#mask {
      position: fixed;
      background-color: white;
      opacity: 0.8;
      text-align: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9000;
    }
    div#mask > span {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 9001;
    }
    </style>
    <script>
      function $(id){
        var el = 'string' == typeof id
          ? document.getElementById(id)
          : id;

        el.on = function(event, fn){
          if ('content loaded' == event) {
            event = window.attachEvent ? "load" : "DOMContentLoaded";
          }
          el.addEventListener
            ? el.addEventListener(event, fn, false)
            : el.attachEvent("on" + event, fn);
        };

        el.all = function(selector){
          return $(el.querySelectorAll(selector));
        };

        el.each = function(fn){
          for (var i = 0, len = el.length; i < len; ++i) {
            fn($(el[i]), i);
          }
        };

        el.getClasses = function(){
          return this.getAttribute('class').split(/\s+/);
        };

        el.addClass = function(name){
          var classes = this.getAttribute('class');
          el.setAttribute('class', classes
            ? classes + ' ' + name
            : name);
        };

        el.removeClass = function(name){
          var classes = this.getClasses().filter(function(curr){
            return curr != name;
          });
          this.setAttribute('class', classes.join(' '));
        };

        el.prepend = function (child) {
          this.insertBefore(child, this.firstChild);
        };

        el.append = function (child) {
          this.appendChild(child);
        };

        el.css = function (name, value) {
          this.style[name] = value;
        }

        el.click = function () {
          var event = new MouseEvent('click', {
            view: window,
            bubbles: false,
            cancelable: true
          });
          this.dispatchEvent(event);
        };

        return el;
      }

      function search() {
        var str = $('search').value.toLowerCase();
        var links = $('files').all('a');

        links.each(function(link){
          var text = link.textContent.toLowerCase();

          if ('..' == text) return;
          if (str.length && ~text.indexOf(str)) {
            link.addClass('highlight');
          } else {
            link.removeClass('highlight');
          }
        });
      }

      function upload_trigger () {
        $('upload-input').click();
      }

      function upload_progress (evt) {
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          percentComplete = ~~(percentComplete * 100);
          if (percentComplete == 0) {
            $('upload-progress').innerHTML = 'uploading ...';
          } else {
            $('upload-progress').innerHTML = 'uploading (' + percentComplete + ') ...'
          }
        }
      }

      function upload_status (evt) {
        if (evt.target.readyState == XMLHttpRequest.DONE) {
          switch(~~(evt.target.status/100)) {
          case 2:
            $('mask').css('display', 'none');
            window.refresh(true);
          }
        }
      }

      function upload (evt) {
        var form = new FormData();
        var dir = encodeURIComponent('{directory}');
        for (var i = 0, n = evt.target.files.length; i < n; i++) {
          form.append('uploads', evt.target.files[i], evt.target.files[i].name);
        }
        form.append('dir', '{directory}');
        $('mask').css('display', 'block');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload?dir=' + dir);
        xhr.addEventListener('readystatechange', upload_status);
        xhr.upload.addEventListener('progress', upload_progress, false);
        xhr.send(form);
      }

      function plugin_upload_init () {
        var li = document.createElement('li');
        li.innerHTML =
          '<a id="upload-btn" href="javascript:void(0);">' +
          '<span class="name">Upload</span></a>';
        $('files').append(li);
        $('upload-btn').on('click', upload_trigger);
        $('upload-input').on('change', upload);
      }

      $(window).on('content loaded', function(){
        $('search').on('keyup', search);
        plugin_upload_init();
      });
    </script>
  </head>
  <body class="directory">
    <input id="upload-input" type="file" name="uploads" multiple="multiple" />
    <input id="search" type="text" placeholder="Search" autocomplete="off" />
    <div id="wrapper">
      <h1><a href="/">~</a>{linked-path}</h1>
      {files}
    </div>
    <div id="mask" style="display:none"><span id="upload-progress">uploading ...</span></div>
  </body>
</html>
